$(document).ready(function () {
    $('div.photo').on('mouseenter mouseleave', function (e) {
        $(this).find('.details').toggleClass('entered', e.type === 'mouseenter');
    });
});

(function ($) {
    $(document).on('mouseenter mouseleave', 'div.photo', function (e) {
        var $details = $(this).find('.details');
        if (e.type === 'mouseenter') {
            $details.fadeTo('fast', .7);
        } else {
            $details.fadeOut('fast');
        }
    });
})(jQuery);

$(document).ready(function () {
    $('#more-photos').click(function (e) {
        e.preventDefault();
        $(this).trigger('nextPage', [true]);
    });
});

(function ($) {
    $(document).on('nextPage', function () {
        var url = $('#more-photos').attr('href');
        if (url) {
            $.get(url, function (data) {
                setTimeout(function () {
                    $('#gallery').append(data);
                    $(document).trigger('pageLoaded');
                }, 1000);
            });
        }
    });

    var pageNum = 1;
    $(document).on('nextPage', function () {
        pageNum++;
        if (pageNum < 20) {
            $('#more-photos').attr('href', 'pages/' + pageNum + '.html');
        } else {
            $('#more-photos').remove();
        }
    });
})(jQuery);

(function ($) {
    function checkScrollPosition() {
        var distance = $(window).scrollTop() + $(window).height();
        if ($('#container').height() <= distance) {
            $(document).trigger('nextPage');
        }
    }

    $.event.special.throttledScroll = {
        setup: function (data) {
            var timer = 0;
            $(this).on('scroll.throttledScroll', function (e) {
                if (!timer) {
                    timer = setTimeout(function () {
                        $(this).triggerHandler('throttledScroll');
                        timer = 0;
                    }, 250);
                }
            });
        },
        teardown: function () {
            $(this).off('scroll.throttledScroll');
        }
    }

    $(window).on('throttledScroll', checkScrollPosition).trigger('throttledScroll');
})(jQuery);
// exercise 1
(function ($) {
    $(document).on('click', '#gallery .details', function (e) {
        $(this).closest('.photo').toggleClass('selected');
    })
})(jQuery);

(function ($) {
    $.event.special.pageLoaded = {
        // exercise 3
        setup: function (data) {
            $(document).on('nextPage', function () {
                $('h2').text('正在加载');
            });
        },
        teardown: function () {
            $(this).off('pageLoaded');
        }
    }
    // exercise 2
    $(window).on('pageLoaded', function () {
        $('h2').text('加载完成');
    })
})(jQuery);
// exercise 4
(function ($) {
    $(document).on('mousemove', '#gallery .details', function (e) {
        //console.log(e.offsetX + ' ' + e.offsetY);
    });
})(jQuery);
// exercise 5 improved mousemove events
(function ($) {
    var count = 0;
    var timer = 0;
    $(document).on('mousemove', '#gallery .details', function (e) {
        count++;
        if (count <= 5) {
            console.log(e.offsetX + ' ' + e.offsetY);
        }
        if (!timer) {
            timer = setTimeout(function () {
                count = 0;
                timer = 0;
            }, 1000);
        }
    });
})(jQuery);
// exercise 6
(function () {
    $.event.special.tripleclick = {
        add: function (data) {
            var count = 0;
            var timer = 0;
            var hide = true;
            $(data.selector).on('click', function () {
                count++;
                if (count == 3) {
                    $(data.selector).trigger('tripleclick', hide);
                    hide = !hide;
                }
                if (!timer) {
                    timer = setTimeout(function () {
                        count = 0;
                        timer = 0;
                    }, 500);
                }
            });
        },
        teardown: function () {
            $(this).off('tripleclick');
        }
    }

    $(document).on('tripleclick', 'h1', function (e, hide   ) {
        if (hide) {
            $('#gallery').hide();
        } else {
            $('#gallery').show();
        }
    });
})(jQuery)